<template>
  <div v-if="!isFirstLegRole()">
    <div>
      <h4>货件图片：</h4>
      <div style="color: #7F7F7F; font-size: 14px; margin-top: -10px;">
        <div>
          非必填，如果货件（商品）有异常（破损、缺件、错误等情况），您可上传货件（商品）的照片，以供客户查看
        </div>
        <div>
          最多可传9张图片，上传后系统自动为您保存当前图片。<span style="color: red;">系统会为您保存180天，180天后将清除这些图片</span>
        </div>
      </div>
      <template v-if="imgArr.length > 0">
        <div>
          <div v-for="(item, index) in imgArr" :key="index" style="margin-right: 10px; margin-left: 10px; display: inline-block; margin-top: 30px; margin-bottom: 30px;">
            <el-image
              class="zoomable-image"
              style="width: auto; height: 200px; vertical-align: top;"
              :src="item"
              :preview-src-list="imgArr"
              @mouseover="showCloseIcon(index)"
              @mouseout="hideCloseIcon(index)"
            ></el-image>
            <template v-show="showClose[index] !== undefined">
              <span class="close-icon" @click="removeImage(index)">x</span>
            </template>
          </div>
        </div>
      </template>
      <el-button size="large" v-show="!showUploadInfo" @click="showUpload" style="margin-top: 10px;">
        上传图片
      </el-button>
      <div
        style="border: 1px solid #C0C4CC;
        border-radius: 10px;
        margin-top: 10px;
        height: 270px;
        width: 550px;"
        v-show="showUploadInfo"
      >
        <div style="margin-left: 30px; margin-top: 30px;">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess(data)"
            :before-upload="beforeAvatarUpload"
            :headers="uploadHeader"
            :disabled="uploadIng"
            :multiple="true"
            :concurrency="1"
            style="display: inline-block; margin-left: 20px; margin-right: 30px;"
          >
            <el-button type="primary" :loading="imgLoading" style="">
              本地上传（电脑）
            </el-button>

          </el-upload>


          <div style="display: inline-block;"><b>直接上传已保存在电脑中的图片</b></div>
        </div>

        <div style="margin-left: 40px; margin-top: 30px;">
          <div class="qrcode" style="display: inline-block;">
            <div id="pay-qrcode" ref="payQrcode"></div>
          </div>
          <div style="display: inline-block; margin-left: 30px; width: 260px; height: 150px; position: relative; top: -25px;">
            <b>手机拍照/图片上传</b>
            <br>
            <br>
            <span style="color: #7F7F7F; font-size: 13px;">请用手机扫描左侧二维码</span>
            <br>
            <br>
            <span style="color: #7F7F7F; font-size: 13px;">在打开的手机网页中，您可拍照或直接上传手机中的图片</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import QRCode from 'qrcodejs2';
import {getToken} from "@/utils/auth";
import {isFirstLegRole} from "@/utils/common";
export default {
  name: "ShipmentInfoImg",
  props:{
    data: {
      type: Object,
      required: true,
    },
    updateImgUrl: {
      type: String,
    },
    saveFunc: {
      type: Function,
    },
    getFunc: {
      type: Function,
    },
  },
  data(){
    return {
      uploadIng: false,
      uploadUrl: process.env.VUE_APP_BASE_API + '/uploadShipmentImage',
      uploadHeader: {
        Authorization: 'Bearer ' + getToken(),
      },
      imgArr: [],
      imgLoading: false,
      showClose: [],
      showUploadInfo: false,
      interval: null,
    }
  },
  created() {
    this.interval = setInterval(()=>{
      if (this.updateImgUrl !== '') {
        if (this.data.status === 0) {
          this.showUploadInfo = true
        }
        this.getImgData()
        this.createQrCode()
        clearInterval(this.interval);

        this.interval = setInterval(()=>{
          this.getImgData()
        },1500)

      }
    },1500)
  },
  methods:{
    isFirstLegRole,
    getImgData(){
      this.getFunc(this.data.id)
        .then(res=>{
          if(res.error === 0){
            this.imgArr = Object.values(res.data)
            this.showClose = new Array(this.imgArr.length).fill(false) // 控制关闭图标显示
            this.imgLoading = false
          } else {
            this.$errorMessage(res.message)
          }
        })
    },
    // 创建一个微信支付二维码
    createQrCode(){
      if(!this.$refs.payQrcode){
        return;
      }
      // 避免创建重复的二维码 qrcode是追加元素
      if(this.$refs.payQrcode) this.$refs.payQrcode.innerHTML = ''
      new QRCode(this.$refs.payQrcode, {
        text: this.updateImgUrl,
        width: 150,
        height: 150,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        // correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    },

    // 图片上传
    handleAvatarSuccess(data) {
      return (res, file, fileList) => {
        this.imgLoading = true
        const postData = {
          id: data.id,
          imageUrl: res.info.imageUrl,
          type: 'add',
        }
        this.saveFunc(postData)
          .then(res=>{
            if(res.error === 0){
              this.getImgData()
            } else {
              this.$errorMessage(res.message)
            }
            this.imgLoading = false
          })
      }
    },

    beforeAvatarUpload(file) {
      if (this.imgArr.length >= 9) {
        this.$message.error(this.$t('shipment.上传的图片不得超过9张'));
        return false
      }
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt1M = file.size / 1024 / 1024 < 10;

      // this.uploadIng = true
      if (!isJPG) {
        // this.uploadIng = false
        this.$message.error(this.$t('shipment.上传的图片格式需为jpeg/png'));
      }
      if (!isLt1M) {
        // this.uploadIng = false
        this.$message.error(this.$t('shipment.上传的图片不得超过10M'));
      }
      return isJPG && isLt1M;
    },

    showCloseIcon(index) {
      this.$set(this.showClose, index, true);
    },

    hideCloseIcon(index) {
      this.$set(this.showClose, index, false);
    },

    removeImage(index) {
      const postData = {
        id: this.data.id,
        imageUrl: this.imgArr[index],
        type: 'del',
      }
      this.imgArr.splice(index, 1);
      this.saveFunc(postData)
        .then(res=>{
          if(res.error === 0){
            this.getImgData()
          } else {
            this.$errorMessage(res.message)
          }
        })
    },

    showUpload() {
      this.showUploadInfo = true
    },

  },
  destroyed() {
    if(this.interval){
      clearInterval(this.interval)
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  //width: 1800px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.table-tips{

}
.header-card{
  position: relative;
  .button{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    top: 30px;
  }
}
.zoomable-image {
  width: 178px;
  height: 138px;
  transition: transform 0.3s; /* 添加过渡效果，使放大效果更平滑 */
}
//.zoomable-image:hover {
//  transform: scale(1.2); /* 鼠标移入时放大 1.2 倍，可以根据需要调整 */
//}
.close-icon {
  position: relative;
  top: -10px;
  left: -15px;
  font-size: 15px;
  cursor: pointer;
  color: white;
  border: 1px solid rgba(245, 108, 108, 1);
  background-color: rgba(245, 108, 108, 1);
  border-radius: 10px;
  width: 22px;
  height: 21px;
  text-align: center;
  transition: transform 0.3s;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
}
//.zoomable-image:hover .close-icon {
//  display: block;
//}
</style>
